<!DOCTYPE html>
<html lang="zh_CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>测评报告</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport"
		content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<!-- <link rel="stylesheet" href="../../css/sm.min.css">
	<link rel="stylesheet" href="../../css/sm-extend.min.css">
	<script type="text/javascript"
		src="../../common/common/common.js"></script> -->

	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
	<script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
	<!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

	<!-- <script type="text/javascript"
		src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
	<script>
		var vConsole = new VConsole();
	</script> -->


	<style type="text/css">
		/*css 的样式都放在这里*/
		/*ceping_first样式*/
		#ceping_first_content {
			box-shadow: 0px 1px 6px gainsboro;
			/* border: solid 1px gainsboro; */
			width: calc(100% - 1.5rem);
			margin: 0.6rem 0.75rem 0;
			padding: 0 0.75rem 1rem;
			border-radius: 0.8rem;
		}

		/*ceping_first内容布局*/
		/*2017年上半年考试答题解析*/
		#ceping_first_content_first_div {
			text-align: left;
			/*border: solid 1px blue;*/
			padding-top: 1rem;
		}

		#ceping_first_content_first_span {
			font-size: 0.85rem;
		}

		.submit-time {
			font-size: 0.6rem;
			color: #999;
		}

		.use-tiem-box {
			display: flex;
			align-items: center;
			font-size: 0.7rem;
			color: #999;
			font-weight: 400;
		}

		.use-time {
			margin-right: 1rem;
		}

		#truebox {
			display: flex;
			align-items: center;
		}

		#truebox .num, #truebox .total {
			padding-top: 0.1rem;
			font-size: 1rem;
		}

		#truebox .num {
			color: #3861f1;
		}

		.truebi, .user-score {
			font-size: 0.7rem;
			color: #999;
			font-weight: 400;
		}

		/*95.0分*/
		#ceping_first_content_second_div {
			padding-bottom: 0.3rem;
			padding-top: 0.1rem;
			text-align: center;
			font-size: 35px;
			color: #02CAAD;
		}

		#ceping_first_content_second_span_two {
			font-size: 14px;
		}

		/*分数小图标*/
		#fenshu_xiaotubiao {
			/*border: solid red 1px;*/
			padding-left: 1.7rem;
			padding-right: 1.7rem;
			background: url(http://47.104.254.28/commonfile/img/img/img_green_line_left.png) no-repeat 0% 50%,
				url(http://47.104.254.28/commonfile/img/img/img_green_line_right.png) no-repeat 100% 50%;
			background-size: 1.5rem 0.8rem, 1.5rem 0.8rem;

		}

		/*满分.打败.排名*/
		#ceping_first_content_third_div_buju {
			display: none;
			width: 94%;
			margin-left: 3%;
			text-align: center;
			font-size: 15px;
		}

		#ceping_first_content_third_span_one {
			float: left;
		}

		#ceping_first_content_third_span_three {
			float: right;
		}

		/*实际用时*/

		/*ceping_second内容布局*/
		#ceping_second_content {
			width: 94%;
			margin-left: 3%;
			margin-top: 1rem;
		}

		/*文字*/
		#ceping_second_content_first_div {
			display: none;
			font-size: 14px;
			/*color: red;*/
			margin-bottom: 0.2rem;
		}

		/*table*/
		#ceping_second_content_second_div table {
			width: 100%;
		}

		#ceping_second_content_second_div table td {
			width: 12.5%;
			padding-bottom: 10px;
		}

		#ceping_second_content_second_div table td div {
			text-align: center;
			/* border: 1px #02CAAD solid; */
			/* color: #02CAAD; */
			/*margin-bottom: 2px;*/
			width: 1.4rem;
			height: 1.4rem;
			margin-left: 10%;
			padding-top: 0.3rem;
			border-radius: 0.1rem;
			font-size: 0.6rem;
		}

		/*ceping_third样式*/
		#ceping_third {
			display: none;
			margin-bottom: 3rem;
		}

		#ceping_third_content {
			width: 94%;
			margin-left: 3%;
			margin-top: 1rem;
		}

		/*文字*/
		#ceping_third_content_first_div {
			margin-bottom: 0.2rem;
			font-size: 14px;
			/*color: red;*/
		}

		/*table*/
		#ceping_third_content_second_div table {
			width: 100%;
			/*border: solid gainsboro 1px;*/
		}

		#ceping_third_content_second_div table td {
			width: 25%;
			border: solid gainsboro 1px;
			text-align: center;
			font-size: 14px;
			padding-bottom: 2px;
			padding-top: 2px;
		}

		/*超出部分未隐藏*/
		.page.page-current {
			overflow: auto;
			background-color: white;
			padding-bottom: 2rem;
		}

		.bar.bar-tab {
			background-color: wrhite;
		}

		/*标题栏分割线*/
		#gongju_fenge {
			border-left: solid gainsboro 1px;
			border-right: solid gainsboro 1px;
		}

		/*工具栏字体颜色，位置*/
		#gongjulan_yangshi {
			position: fixed;
			bottom: 0px;
		}

		.tab-label {
			color: #02CAAD;
		}

		#zhishidian {
			color: #02CAAD;
		}
	</style>


</head>

<body>
	<div class="page-group">
		<div class="page page-current">

			<!-- html代码内容区域 -->
			<div id="ceping_content">
				<div id="ceping_first">
					<div id="ceping_first_content">
						<div id="ceping_first_content_first_div">
							<span id="ceping_first_content_first_span"></span>
						</div>
						<div id="submitTime" class="submit-time"></div>
						<div class="use-tiem-box">
							<div id="ceping_first_content_fourth_span_one" class="use-time"></div>
							<div id="truebox"></div>
						</div>

						<div class="user-score">
							得分： <span id="ceping_first_content_second_span_one"></span>
						</div>
						<div class="truebi"></div>

						<!--分数-->
						<!-- <div id="ceping_first_content_second_div">
							<span id="fenshu_xiaotubiao">
								<span id="ceping_first_content_second_span_one">
								</span><span id="ceping_first_content_second_span_two">分</span>
							</span>
						</div> -->
						<div id="ceping_first_content_third_div">
							<div id="ceping_first_content_third_div_buju">
								<span id="ceping_first_content_third_span_one"></span>
								<span id="ceping_first_content_third_span_two"></span>
								<span id="ceping_first_content_third_span_three"></span>
							</div>
						</div>
					</div>
				</div>
				<div id="ceping_second">
					<div id="ceping_second_content">
						<div id="ceping_second_content_first_div">
						</div>
						<div id="ceping_second_content_second_div">
							<table id="add_timu_num">
								<!--题目序号-->
							</table>
						</div>
					</div>
				</div>
				<div id="ceping_third">
					<div id="ceping_third_content">
						<div id="ceping_third_content_first_div">
							<!--试卷分析：最高分100分，最低分99分，平均分78分-->
						</div>
						<div id="ceping_third_content_second_div">
							<table id="timu_type">
								<!--<tr>
								<td>知识点</td>
								<td>题目数</td>
								<td>正确数</td>
								<td>正确率</td>
							</tr>-->

							</table>
						</div>
					</div>
				</div>
			</div>

			<!--工具栏-->
			<nav class="bar bar-tab" id="gongjulan_yangshi">
				<a class="tab-item external" href="#" onclick="jiexi_cuoti()">
					<span class="tab-label">错题解析</span>
				</a>
				<a class="tab-item external" href="#" onclick="all_jiexi()">
					<div id="gongju_fenge">
						<span class="tab-label">全部解析</span>
					</div>
				</a>
				<a class="tab-item external" href="#" onclick="jixu_zuoti()">
					<span class="tab-label">继续做题</span>
				</a>
			</nav>


		</div>
	</div>





	<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
	<!-- <script type="text/javascript"
		src="../../js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript'
		src='../../zepto/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm-extend.min.js'
		charset='utf-8'></script> -->

	<script type="text/javascript"
		src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript'
		src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
		charset='utf-8'></script>


	<script type="text/javascript">
		// 函数区域，函数放在“初始化区域的上面”
		var curpager_id = "";
		function getParams(data) {
			//		console.log("aa");
			// 		data需要转成json调用 ，函数urlParamParseJson();
			var jsonData = urlParamParseJson(data);
			curpager_id = jsonData.paper_id;
			var params = {
				paper_id: jsonData.paper_id
			}
			// var params = {
			// 	paper_id:18
			// }
			net_request('get', 'user/paperReport', params, infosuccessCallBack, errorCallBack);
		}
		//	成功的回调函数
		function infosuccessCallBack(data) {
			console.log(data);
			try {
				if (isNotNull(data)) {
					if (data.success == true) {
						$$("#timu_type").html("");
						$$("#timu_type").html("<tr id='zhishidian'><td>知识点</td><td>题目数</td><td>正确数</td><td>正确率</td></tr>");

						var curval = data.data;
						//	        	title
						if (isNotNull(curval.title)) {
							$$("#ceping_first_content_first_span").text(curval.title);
						}
						//	           	得分
						if (isNotNull(curval.correct_score) || curval.correct_score >= 0) {
							$$("#ceping_first_content_second_span_one").text(curval.correct_score);
						}
						//	           	满分
						if (isNotNull(curval.score)) {
							$$("#ceping_first_content_third_span_one").text("满分：" + curval.score);
						}
						//	           	打败
						if (isNotNull(curval.beat_num)) {
							$$("#ceping_first_content_third_span_two").text("打败：" + curval.beat_num);
						}
						//	           	排名
						if (isNotNull(curval.order)) {
							$$("#ceping_first_content_third_span_three").text("排名：第" + curval.order + "名");
						}

						if (isNotNull(curval.correct_num) || curval.correct_num >= 0) {
							let num = (curval.correct_num / curval.question_num * 100).toFixed(2)
							console.log(num)
							$$('.truebi').text(`正确率： ${num}%`);
						}

						$$('#submitTime').text(curval.created_at)
						$$('#truebox').html(`<div>答对： </div><div class="num">${curval.correct_num}</div><div class="total">/${curval.question_num}</div>`);

						//	           	实际用时
						if (isNotNull(curval.use_time)) {
							var user_shi = parseInt(curval.use_time / (60 * 60));
							//	           		if(user_shi<=10){
							//	           			user_shi="0"+user_shi;
							//	           		}
							var user_fen = parseInt((curval.use_time / 60) % 60);

							if (user_fen <= 10) {
								user_fen = "0" + user_fen;
							}
							var user_miao = parseInt(curval.use_time % 60);
							if (user_miao < 10) {
								user_miao = "0" + user_miao;
							}
							$$("#ceping_first_content_fourth_span_one").text("用时： " + user_shi + ":" + user_fen + ":" + user_miao);
						}
						//	           	推荐用时
						if (isNotNull(curval.time)) {
							var tui_shi = parseInt(curval.time / 60);
							//	           		if(tui_shi<=10){
							//	           			tui_shi="0"+tui_shi;
							//	           		}
							var tui_fen = parseInt(curval.time % 60);
							if (tui_fen <= 10) {
								tui_fen = "0" + tui_fen;
							}
							var tui_miao = parseInt(curval.time * 60 % 60);
							if (tui_miao < 10) {
								tui_miao = "0" + tui_miao;
							}
							$$("#ceping_first_content_fourth_span_two").text("推荐用时：" + tui_shi + ":" + tui_fen + ":" + tui_miao);
						}
						var timu = "";
						var zongfe = "";
						var defen = "";
						var defenlv = "";
						var timu_content = "";
						var rem_td = "";
						if (isNotNull(curval.question_num)) {
							var timu_num = curval.question_num;
							timu = "题目" + curval.question_num + "道，";
							//	         		取整行
							timu_row = parseInt(timu_num / 8);
							//	         		取余数
							remainder = timu_num % 8;
							for (var i = 0; i < timu_row; i++) {
								timu_content += "\
	         			<tr>\
							<td><div id='ceping_"+ (1 + i * 8) + "' onclick='click_ceping(" + (1 + i * 8) + ")'>" + (1 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (2 + i * 8) + "' onclick='click_ceping(" + (2 + i * 8) + ")'>" + (2 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (3 + i * 8) + "' onclick='click_ceping(" + (3 + i * 8) + ")'>" + (3 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (4 + i * 8) + "' onclick='click_ceping(" + (4 + i * 8) + ")'>" + (4 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (5 + i * 8) + "' onclick='click_ceping(" + (5 + i * 8) + ")'>" + (5 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (6 + i * 8) + "' onclick='click_ceping(" + (6 + i * 8) + ")'>" + (6 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (7 + i * 8) + "' onclick='click_ceping(" + (7 + i * 8) + ")'>" + (7 + i * 8) + "</div></td>\
							<td><div id='ceping_"+ (8 + i * 8) + "' onclick='click_ceping(" + (8 + i * 8) + ")'>" + (8 + i * 8) + "</div></td>\
						</tr>\
	         			";
							}
							for (var p = 0; p < remainder; p++) {
								rem_td += "\
		         		<td><div id='ceping_"+ (1 + timu_row * 8 + p) + "' onclick='click_ceping(" + (1 + timu_row * 8 + p) + ")'>" + (1 + timu_row * 8 + p) + "</div></td>\
		         		";
							}
							timu_content = timu_content + rem_td;

							$$("#add_timu_num").html(timu_content);
						}
						if (isNotNull(curval.score)) {
							zongfe = "总分" + curval.score + "分，";
						}
						if (isNotNull(curval.correct_score)) {
							defen = "得分" + curval.correct_score + "分，";
						}
						var defenlvv = "";
						var defenlvvv = "";
						if (isNotNull(curval.score) && isNotNull(curval.correct_score)) {
							defenlv = curval.correct_score / curval.score * 100;
							defenlvv = Math.round(defenlv * 100) / 100;
							defenlvv = (defenlvv + '').indexOf('.') > -1 ? defenlvv.toFixed(2) : defenlvv;
							defenlvvv = "得分率" + defenlvv + "%";
						}
						var tiaojia = timu + zongfe + defen + defenlvvv;
						//				删除末端逗号
						tiaojia = tiaojia.replace(/(.*)[，]$/, '$1');
						$$("#ceping_second_content_first_div").html(tiaojia);
						//				按钮颜色
						if (isNotNull(curval.questions)) {
							//	         		console.log(curval.questions.length);
							for (var cxs = 0; cxs < curval.questions.length; cxs++) {
								//	         			console.log(curval.questions[cxs].correct);
								//	         			正确
								if (curval.questions[cxs].correct == 0) {
									$$("#ceping_" + (cxs + 1)).css({ "background-color": "#02CAAD", "color": "white" });
									//							$$("#ceping_"+(cxs+1)).css("background-color","#02CAAD");
								} else if (curval.questions[cxs].correct == 1 && curval.questions[cxs].user_answer) { 
									//	         			错误
									//	         				$$("#ceping_"+(cxs+1)).css("background-color","#FF6A49");
									$$("#ceping_" + (cxs + 1)).css({ "background-color": "#FF6A49", "border-color": "#FF6A49", "color": "white" });
								} else {
									$$("#ceping_" + (cxs + 1)).css({ "background-color": "#eee", "border-color": "#eee", "color": "#333" });
								}


								//	         			FF6A49
							}
						}
						var gaofen = "";
						var difen = "";
						var junfen = "";
						//	        	最高分
						//				最低分
						//				平均分
						if (isNotNull(curval.high_score)) {
							gaofen = "最高分" + curval.high_score + "分，";
						}
						if (isNotNull(curval.low_score)) {
							difen = "最低分" + curval.low_score + "分，";
						}
						if (isNotNull(curval.avg_score)) {
							curval.avg_score = String(curval.avg_score).indexOf('.') > -1 ? Number(curval.avg_score).toFixed(2) : curval.avg_score;
							junfen = "平均分" + curval.avg_score + "分";
						}
						//				去除尾部逗号
						var tiaojiafenxi = gaofen + difen + junfen;
						tiaojiafenxi = tiaojiafenxi.replace(/(.*)[，]$/, '$1');
						$$("#ceping_third_content_first_div").text("试卷分析：" + tiaojiafenxi);
						//				知识点类别
						if (isNotNull(curval.points)) {
							//					遍历类型（json）
							var sss = curval.points;
							//					类型长度
							//					var sss_len =0;
							console.log(curval.points);
							for (var o in sss) {
								//				        console.log(o); 
								//				        sss_len += 1;
								//						题目数sss[o].total_num
								//						正确数sss[o].correct_num
								var correct = Math.round(sss[o].correct_num / sss[o].total_num * 100 * 100) / 100;
								$$("#timu_type").append("\
							<tr>\
								<td>"+ o + "</td>\
								<td>"+ sss[o].total_num + "</td>\
								<td>"+ sss[o].correct_num + "</td>\
								<td>"+ correct.toFixed(2) + "%</td>\
							</tr>\
						");
							}
						}
					}
				}
			} catch (error) {
				console.log(error)
			}

		}
		// 	失败的回调函数
		function errorCallBack(data) {
			console.log(data);
		}

		//	错题解析
		function jiexi_cuoti() {
			native_goto('local/cepingbaogao_cuotijiexi?pager_id=' + curpager_id);
		}
		//	全部解析
		function all_jiexi() {
			native_goto('local/cepingbaogao_quanbujiexi?pager_id=' + curpager_id);
		}
		//	继续做题
		function jixu_zuoti() {
			native_goto('local/cepingbaogao_jixuzuoti?pager_id=' + curpager_id);
		}
		function click_ceping(xuhao) {
			//native_goto('local/click_ceping_xuhao?xuhao'+xuhao)
		}

		// 	初始化区域
		$$(function () {
			//		getParams("getParams?paper_id="+1);
			// getParams();
			$.init();
		});


	</script>
</body>

</html>